#{extends 'main.html' /}
		<div id="topo">
			<img src="/public/images/header.png" />
		</div>
		<div id="banner">
		</div>
		<div id="profile">
			<div id="imagem">
				<img src="${eleitor.foto}">
			</div>
			<div id="dados">
				<div id="dEsquerda">
					<p class="nome">${eleitor.nome} - ${eleitor.id}</p>
					${eleitor.dataNascimento}<br/>
					${eleitor.uf}<br/>
					${eleitor.genero}<br/>
				</div>
			</div>
		</div>
		<select onchange="javascript:exibirPoliticos(this);">
		<option value="-1">Selecione seu Estado</option>
				#{set uf: 0 /}
				#{list items:politicos, as:'politico'}
						#{if uf != politico.uf}
						#{set uf: politico.uf /}
  						<option value="${uf}">${uf}</option>
						#{/if}
				#{/list}
		</select>
			
		<div class="stream">
				#{list items:politicos, as:'politico'}
							<div class="esconder ${politico.uf}">
									<p class="nome">${politico.nome}</p>
									<p class="nome">${politico.partido}</p>
									<p class="nome"><img id="id_${politico.id}" onmouseover="javacript:pointer(this);" onclick="javascript:mudaSelecao(this, ${eleitor.id}, ${politico.id});" src="${politico.foto}" height="150px" /></p>
							</div>
				#{/list}
			
		</div>
		<div class="concluir">
			<a href="@{profile(eleitor.id)}">Concluir</a>
		</div>
		<script>
			function pointer(element) {
				element.style.cursor = 'pointer';
			} 
			
			function exibirPoliticos(select) {
				var uf = select.options[select.selectedIndex].value;
				$(".mostrar").removeClass('mostrar').addClass('esconder');
				if(uf != -1) {
					$("." + uf).removeClass('esconder').addClass('mostrar');
				}
			}

			function mudaSelecao(element, eleitorId, politicoId) {
				var f = #{jsAction @Application.add(':eleitorId', ':politicoId') /};
				var g = #{jsAction @Application.remove(':eleitorId', ':politicoId') /};
				var ajaxParam;
				

				if ($("#id_" + politicoId).hasClass("selecionado")) {
					ajaxParam = {url : g({eleitorId: eleitorId, politicoId: politicoId}), success: ok, dataType: 'json', type: 'GET'};
				} else {
					ajaxParam = {url : f({eleitorId: eleitorId, politicoId: politicoId}), success: ok, dataType: 'json', type: 'GET'};
				}
				$("#id_" + politicoId).toggleClass("selecionado");
				$.ajax(ajaxParam);
			}

			
			function ok(data) {
				$(".mostrar").addClass()
			}
		</script>
		
		
